<template>
    <div class="chart">
         <div style="display:none">
            <div id='hour'></div>
            <div id='year'></div>
        </div>
        <div class="header">
            <cjc-nav title="常用表格" @customRouter="customRouter" btn3="60s" class="daohang"></cjc-nav>
            <!-- 学生信息 -->
            <div class="stuMessage">
                <div class="userImg"><img :src="userInfo.avtor" width="95px" height="95px"></div>
                <div style="margin-top:5%">
                    <table class="userMsg">
                         <tr>
                            <td>姓名：<span> {{ this.$store.state.userInfo.XM }} </span></td>
                            <td>学校：<span> {{ this.$store.state.userInfo.XQMC }} </span></td>
                        </tr>
                        <tr>
                            <td>学号：<span> {{ this.$store.state.userInfo.KEY_ID }} </span></td>
                            <td>班级：<span> {{ this.$store.state.userInfo.BJMC }} </span></td>
                        </tr>
                        <tr>
                            <td>性别：<span> {{ this.$store.state.userInfo.XB }} </span></td>
                            <!-- <td>培养层次：<span> {{ userInfo.level }} </span></td> -->
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- 模板列表 -->
        <div class="content">
            <table>
                <tr v-for="item in fileList" :key="item.index" class="chartPreview" @click="selectChart(item)">
                    <td><img :src="item.filePic"></td>
                    <td> {{ item.name }} </td>
                    <td> {{ item.printCount }}人打印 </td>
                </tr>
            </table>
        </div>
        <div class="page-option-btn">
            <div class="lastPage" :class="{'cannot-option':lastPageDisabled}" @click="lastPage"><i class="icon iconfont icon-shuangjiantouzuo shuangjiantouzuo"></i><span>上一页</span></div>
            <div class="pageNum"><span> {{ this.pageNum }} </span>/<span> {{ totalPageNum }} </span></div>
            <div class="nextPage" :class="{'cannot-option':nextPageDisabled}" @click="nextPage"><span>下一页</span><i class="icon iconfont icon-shuangjiantouyou shuangjiantouyou"></i></div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'home',
    created() {
        this.pageNum = 1
        this.getFileList()
    },
    data() {
        return {
            userInfo: {
                name: '李四',
                sex: '女',
                college: '西南财经大学天府学院',
                stuNum: '41400812',
                major: '计算机科学与技术',
                level: '本科(四年)',
                avtor: 'static/images/tx.png'
            },
            count: 1,
            pageNum: 1,
            pagesize: 20,
            totalNum: '',
            fileSample: [
                {name: '2018年天府学院田径运动会报名表', fileType: 1, printCount: 129},
                {name: '大学本科四六级报名表', fileType: 0, printCount: 29},
                {name: '应用金融研究中心学生科研助理招新报名表', fileType: 1, printCount: 29},
                {name: '各类学生组织代表统计表', fileType: 0, printCount: 129},
                {name: '自荐代表介绍表', fileType: 1, printCount: 290},
                {name: '自荐代表介绍表', fileType: 1, printCount: 29},
                {name: '应用金融研究中心学生科研助理招新报名表', fileType: 1, printCount: 29},
                {name: '各类学生组织代表统计表', fileType: 0, printCount: 29},
                {name: '自荐代表介绍表', fileType: 1, printCount: 209},
                {name: '2018年天府学院田径运动会报名表', fileType: 1, printCount: 129},
                {name: '大学本科四六级报名表', fileType: 0, printCount: 29},
                {name: '应用金融研究中心学生科研助理招新报名表', fileType: 1, printCount: 29},
                {name: '各类学生组织代表统计表', fileType: 0, printCount: 129},
                {name: '自荐代表介绍表', fileType: 1, printCount: 290},
                {name: '自荐代表介绍表', fileType: 1, printCount: 29},
                {name: '应用金融研究中心学生科研助理招新报名表', fileType: 1, printCount: 29},
                {name: '各类学生组织代表统计表', fileType: 0, printCount: 29},
                {name: '自荐代表介绍表', fileType: 1, printCount: 209},
                {name: '2018年天府学院田径运动会报名表', fileType: 1, printCount: 129},
                {name: '大学本科四六级报名表', fileType: 0, printCount: 29},
                {name: '应用金融研究中心学生科研助理招新报名表', fileType: 1, printCount: 29},
                {name: '各类学生组织代表统计表', fileType: 0, printCount: 129},
                {name: '自荐代表介绍表', fileType: 1, printCount: 290},
                {name: '自荐代表介绍表', fileType: 1, printCount: 29},
                {name: '应用金融研究中心学生科研助理招新报名表', fileType: 1, printCount: 29},
                {name: '各类学生组织代表统计表', fileType: 0, printCount: 29},
                {name: '自荐代表介绍表', fileType: 1, printCount: 209},
                {name: '2018年天府学院田径运动会报名表', fileType: 1, printCount: 129},
                {name: '大学本科四六级报名表', fileType: 0, printCount: 29},
                {name: '应用金融研究中心学生科研助理招新报名表', fileType: 1, printCount: 29},
                {name: '各类学生组织代表统计表', fileType: 0, printCount: 129},
                {name: '自荐代表介绍表', fileType: 1, printCount: 290},
                {name: '自荐代表介绍表', fileType: 1, printCount: 29},
                {name: '应用金融研究中心学生科研助理招新报名表', fileType: 1, printCount: 29},
                {name: '各类学生组织代表统计表', fileType: 0, printCount: 29},
                {name: '自荐代表介绍表', fileType: 1, printCount: 209}
            ],
            fileTamplateList: [],
            lastPageDisabled: true,
            nextPageDisabled: false
        }
    },
    methods: {
        setFileListWatcher() {
            let fileListTimer = setInterval(() => {
                if (window.websockFileList !== undefined) {
                    window.clearInterval(fileListTimer)
                    this.fileTamplateList = window.websockFileList.result
                    console.log('this.fileTamplateList', this.fileTamplateList)
                    this.totalNum = window.websockFileList.total
                    console.log(this.totalNum)
                }
            }, 500)
        },
        // 获取常用文件模板
        getFileList() {
            console.log('get filelist is called')
            let fileData = {
                'interface': 'getFileInfo',
                'pageNum': this.pageNum,
                'pageSize': this.pagesize,
                'type': 2 // 2为常用表格
            }
            this.socket.sendMessage(fileData)
            this.setFileListWatcher()
        },
        // 页面返回按钮
        customRouter() {
            this.$router.push({
                path: '/home'
            })
        },
        selectChart(item) {
            console.log('select item', item)
            this.$store.commit('SET_fileTemplateName', item.name)
            this.$store.commit('SET_filePreciewList', item)
            this.$router.push({
                path: '/preview'
            })
        },
        lastPage() {
            if (this.pageNum < 2) {
                this.pageNum = 1
                this.lastPageDisabled = true
            } else {
                this.pageNum--
                this.lastPageDisabled = false
                this.getFileList()
            }
        },
        nextPage() {
            if (this.pageNum >= this.totalPageNum) {
                this.pageNum = this.totalPageNum
                this.nextPageDisabled = true
            } else {
                this.pageNum++
                this.getFileList()
            }
        },
    },
    components: {
        cjcNav: () => import('@/components/common/Nav.vue')
    },
    computed: {
        // 计算总页数
        totalPageNum() {
            let totalPage = Math.ceil(this.totalNum / this.pagesize)
            if (this.pageNum >= totalPage) {
                this.nextPageDisabled = true
            } else {
                this.nextPageDisabled = false
            }
            if (this.pageNum < 2) {
                this.lastPageDisabled = true
            } else {
                this.lastPageDisabled = false
            }
            return totalPage
        },
        fileList() {
            try {
                let tempObj = []
                this.fileTamplateList.map((item, index) => {
                    if (index < 20) {
                        let filePic = ''
                        if (item.fileType === 0) {
                            // 根据文件类型找到相应图标
                            filePic = 'static/images/word.png'
                        } else {
                            filePic = 'static/images/ex.png'
                        }
                        let a = {
                            fileName: item.fileName,
                            fileType: item.fileType,
                            filePic: filePic,
                            printCount: item.printCount,
                            fileId: item.fileId,
                            name: item.name
                        }
                        tempObj.push(a)
                    }
                })
                return tempObj
            } catch (error) {}
        }
    }
}
</script>

<style lang="less" scoped>
@import '../lib/css/iconfont.css';
::-webkit-scrollbar{
    display:none;
}
::scrollbar {
    display: none;
}
.chart {
    height: 100vh;
    width: 100%;
    // max-width: 1080px;
    overflow-x: hidden;
    display: inline-block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow-x:hidden;
    overflow-y:hidden;
}
.header {
    width: 100%;
    height: 200px;
    position: relative;
    background: -ms-linear-gradient(left,#4fadff,#00f3f5);
    .stuMessage {
        width: 80%;
        height: 100%;
        position: absolute;
        margin: 0 auto;
        margin-left: 10%;
        margin-top: 10%;
        background: white;
        border-radius: 30px;
        box-shadow: 2px 2px 5px #888888;
        .userImg {
            width:100px;
            height:100px;
            border-radius:50px;
            border:solid rgba(79,173,255,0.5) 5px;
            margin: -30px auto;
            background-color: white;
            img {
                margin-top: -2px;
                margin-left: -2px;
            }
        }
        .userMsg {
            width: 100%;
            text-align: left;
            margin-left: 20%;
            line-height: 25px;
            font-size: 15px;
            color: #666;
            tr {
                td {
                    span {
                        color: #111;
                    }
                }
            }
        }
        
    }
}
.daohang {
    background-color: rgba(255,255,255, 0);
    border: rgba(255,255,255, 0);
    color: white;
}
.cjc-nav {
    .title {
        font-size: 30px;
    }
}
.cjc-nav {
    .click-size.size {
        color: white;
        font-size: 22px;
    }
}
.ivu-icon {
    color: white;
}
.content {
    width: 80%;
    // height: 1370px;
    // margin: 15% 10% 4%;
    min-height: 1370px;
    padding-bottom: 30px;
    padding-top: 30px;
    margin: 0 auto;
    margin-top: 15%;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fff;
    table {
        width: 100%;
        margin-left: 20px;
        margin-top: 20px;
        .chartPreview {
            width: 100%;
            height: 60px;
            font-size: 20px;
            td:nth-child(1) {
                width: 60px;
            }
            td:nth-child(2) {
                // width: calc(~'80% - 15px');
                padding-left: 20px;
                width: 75%;
            }
            td:nth-child(3) {
                color:#666666;
            }
        }
    }
}
.page-option-btn {
    height: 120px;
    width: 100%;
    background-color: #339afe;
    position: absolute;
    bottom: 2px;
    // display: none;
    .lastPage {
        width: 33%;
        font-size: 35px;
        color: #fff;
        text-align: center;
        display: inline-block;
        line-height: 120px;
        .shuangjiantouzuo {
            font-size: 35px;
        }
    }
    .pageNum {
        width: 33%;
        text-align: center;
        display: inline-block;
        line-height: 120px;
        font-size: 35px;
        color: #fff;
    }
    .nextPage {
        width: 33%;
        font-size: 35px;
        text-align: center;
        color: #fff;
        display: inline-block;
        line-height: 120px;
        .shuangjiantouyou {
            font-size: 35px;
        }
    }
}
.cannot-option {
    color: rgba(255,255,255,0.6) !important;
}
</style>
